Сегодня мы в очередной раз поговорим о редактировании стандартного шаблона Joomla. В предыдущих уроках мы говорили о том, как работать с кодом страницы и файлами стилей, а так же создали шапку для нашего сайта. Сегодня разберем не менее важный вопрос – как оформить контентную часть страницы (заголовки, параграфы, изображения). Кроме того научимся работать со шрифтами и подберем красивый шрифт для нашего сайта.
Оформление изображений на сайте
Для начала давайте разберемся с изображениями на сайте и начнем с изображения полного текста материала.
По умолчанию изображение полного текста материала можно выводить по левому либо по правому краю, а как быть, если появилось желание разместить его строго по центру? Для этого придётся написать собственные CSS стили для оформления изображения.
Тут нет ничего сложного, находим блок, в котором у нас находится изображение, определяем примененные к нему классы и пишем необходимые стили. В шаблоне Protostar изображение полного текста материала находится в блоке <div> с классами «pull-left» и «item-image». Данный блок вложен в другой блок с классом «item-page»:
Чтобы правильно оформить именно это изображение не затронув остальные, придется оперировать приведенными выше классами. Для того чтобы расположить изображение полного текста материала по центру страницы пишем следующие стили в CSS файл:
.item-page .pull-left.item-image {/*Стили для изображений внутри блоков с указанными классами */
text-align: center; /*содержимое контейнера размещаем по центру*/
width: 100%; /*ширина контейнера 100%*/
margin: 0 0 15px; /*отступ снизу 15 пикселей*/
}
Теперь если сохранить изменения и посмотреть на результат, то можно убедиться в том, что изображение находится по центру страницы.
Оформление миниатюр изображений
Следующим шагом необходимо оформить миниатюры изображений, которые создаются плагином mAvik Thumbnails (если вы его используете, а если нет, то очень рекомендую). Если честно проблем с ним практически не возникает, но почему то именно в шаблоне Protostar есть особенности вывода миниатюр изображений на мобильных устройствах – они вылезают за пределы области контента. Дабы избавиться от подобной проблемы применим к ним следующие стили:
a.thumbnail.zoomin {max-width: 100% !important;}/*Рамка для картинки не более 100% от ширины (Для телефонов)*/
img {height: auto !important;} /*высота изображения подбирается автоматически*/
Мы указали, что ширина рамки содержащей миниатюру изображения не должна быть больше ширины области контента. Эта рамка оформлена в виде ссылки <a> с классами «thumbnail» и «zoomin». Далее мы говорим браузеру, что высота картинки должна быть подобрана автоматически, чтобы избежать нежелательного изменения пропорций изображения.
А теперь давайте сделаем так, чтобы при просмотре изображений на мобильных устройствах они отображались по всей ширине страницы. Для этого нам понадобится медиа-запрос:
@media (max-width: 420px){ /*При такой ширине*/
.item-page img {width: 100%!important;}/*картинки по всей ширине*/
img.mfp-img {width: 100%;} /*Раскрытое изображение плагина mAvik Thumbnails*/
}
Медиа-запрос @media (max-width: 420px) указывает, что вложенные в него стили будут применимы только для устройств с шириной экрана 420 пикселей и менее.
В итоге мы получим вот такой результат:
Таким образом, затратив немного времени, мы оформили изображения на сайте должным образом, теперь они не выходят за пределы области контента при просмотре на мобильных устройствах и смотрятся гораздо лучше.
Оформление текста
Основная составляющая любого сайта помимо всего прочего это текст и изображения, с изображениями разобрались, теперь займемся оформлением текста на сайте.
Под оформлением текста можно понимать как изменение его параметров, таких как размер, цвет, выравнивание и т.п. так и изменение шрифта. Для начала давайте определимся со шрифтами.
Красивый шрифт для сайта
Для изменения шрифта на сайте служит определенное CSS свойство:
font-family: имя_шрифта, дополнительный_шрифт;
Шрифты можно перечислять через запятую, таким образом, если у пользователя на компьютере не будет установлен первый шрифт, то будет использоваться следующий после него и так далее.
Такой подход по-своему хорош, но можно пойти и другим путем – загружать шрифты с онлайн сервисов (CDN-хостинга). В этом случае можно быть уверенным, что указанный шрифт будет работать на любом компьютере. Все что необходимо сделать, это подключить понравившийся Вам шрифт и использовать его по своему усмотрению, но тут стоит быть осторожным и не загружать слишком много шрифтов, это может повлиять на скорость загрузки страницы.
Один из таких онлайн сервисов с бесплатными шрифтами это Google Web Fonts. Сервис со шрифтами от Гугла хорош тем, что вы можете наглядно посмотреть на имеющиеся шрифты, выбрать понравившиеся и подгрузить их на свой сайт. Все проще простого, переходим на страницу Google Web Fonts и ищем шрифт, который нам понравится:
На странице Google Web Fonts можно настроить отображение имеющихся шрифтов по своему усмотрению, например, выбрать только русские шрифты, семейство шрифтов и т.д. Кроме того можно посмотреть как будет выглядеть шрифт применив к нему различные стили такие как размер, начертание и прочее.
После того как со шрифтом определитесь, жмем по значку «+» (таким же образом можно выбирать несколько шрифтов). Внизу страницы появится всплывающее окно, в котором приведен небольшой код необходимый для размещения выбранных шрифтов на сайте:
На данном этапе нас интересует две строчки кода, которые предложил Гугл, они могут отличаться в зависимости от выбранных Вами шрифтов. Первая строка вставляется в индексный файл шаблона между тегами <head></head>, в моем случае она выглядит так:
<link href="https://fonts.googleapis.com/css?family=Alice|Lobster|Open+Sans&subset=cyrillic-ext" rel="stylesheet">
Файл index.php должен получиться примерно следующего вида:
Вторую строку вставляем в файл стилей, либо для всего документа (страницы), либо для каждого элемента по отдельности (заголовок, параграф, список и т.д.). Я, например, выбрал сразу три шрифта Alice, Lobster (рукописный шрифт) и Open Sans и применил их к разным элементам.
Изначально для всего текста я выбрал шрифт Alice и прописал его следующим образом:
body {font-family: 'Alice', serif !important;}
Затем отдельно для заголовков применил другие шрифты:
h1 {font-family: 'Open Sans', sans-serif;}
#content h2, #content h3, #content h4, #content h5 {font-family: 'Lobster', cursive;}
Стили в файле CSS можно размещать где угодно по вашему усмотрению, если необходимо указать на приоритет того или иного стиля тогда необходимо дописать параметр «!important» до символа «;».
Вот таким образом можно подключить красивые шрифты и не беспокоится о том, что их может не оказаться у посетителей сайта.
Другие свойства текста
Теперь давайте напишем еще несколько стилей для текста нашего сайта, тем самым сделаем его более привлекательным и читабельным.
Для начала увеличим размер текста до 16 пикселей для параграфов, и списков. Для этого напишем следующее:
p, .item-page li {font-size: 16px;}
Обратите внимание что стили к спискам будут применены не ко всем, а только к тем которые находятся в области контента (.item-page), это сделано для того чтобы указанные стили не были применены к меню на сайте, и хлебным крошкам которые в свою очередь построены на базе списка.
Теперь добавим параграфам и спискам отступы снизу и сделаем выравнивание текста по ширине страницы:
margin-bottom: 15px !important; text-align: justify;
Переходим к ссылкам, по умолчанию они выделены, синим цветом, а при наведении становятся подчеркнутыми. Избавимся от стереотипов и сделаем наши ссылки другого цвета, а при наведении вместо подчеркивания сделаем их более жирными:
#content a, #content a:hover {color: #FD8E32;} /*Цвет ссылок*/
#content a:hover {/*ссылки при наведении*/
text-decoration: none;
font-weight: 600;
}
Теперь можно сохранить все изменения и посмотреть, что у нас получилось. А получилось у нас следующее – текст сайта стал более привлекательным и лучше читается, а ссылки заметны сразу.
В результате код файла стилей у меня получился следующим:
/*Контент*/
/*Текст*/
h1 {font-family: 'Open Sans', sans-serif !important;}/*Заголовок первого уровня*/
.item-page h2, .item-page h3, .item-page h4, .item-page h5 {font-family: 'Lobster', cursive !important; color: #FD8E32;}
h4 {font-size: 16px !important;}
p, .item-page li {/*Параграф и список*/
font-family: 'Alice', serif;
font-size: 16px;
margin-bottom: 15px !important;
text-align: justify;
}
#content a, #content a:hover {color: #FD8E32;} /*Цвет ссылок*/
#content a:hover {/*ссылки при наведении*/
text-decoration: none;
font-weight: 600;
}
/*Изображения*/
.item-page .pull-left.item-image { /*Стили будут применены только к тем изображениям которые расположены в блоках с указанными классами*/
text-align: center; /*содержимое контейнера размещаем по центру*/
width: 100%; /*ширина контейнера 100%*/
margin: 0 0 15px; /*отступ снизу 15 пикселей*/
}
a.thumbnail.zoomin {max-width: 100% !important;}/*Рамка для картинки не более 100% от ширины (Для телефонов)*/
a.thumbnail:hover, a.thumbnail:focus {border-color: #FD8E32 !important;} /*Цвет рамки с миниатюрой при наведении*/
img {height: auto !important;} /*Высота изображения подбирается автоматически*/
Конечно, это далеко не полный список всевозможных стилей, которые можно применить к тексту на сайте, но этого вполне достаточно.
На этом данный урок подошел к концу, а в следующем уроке мы поговорим о том, как подправить оформление правого меню и навигатора сайта (хлебные крошки), а так же сделаем симпатичную кнопку «Наверх» ведущую в начало страницы.
